<template lang="pug">
  .say-dialog( v-show="showModal")
    .dialog-header 发表说一说
    .content
      el-input(
      type="textarea",
      :rows="1",
      placeholder="请输入内容，限50字以内",
      v-model="message")
    span.dialog-footer(slot="footer")
      el-button(size="small", @click="closeModal") 取 消
      el-button(size="small", type="primary", @click="handleSave") 确 定

</template>

<script>
import modalMixin from '@/mixins/modal'
import { handleSubmitSay } from '@/utils/menu'
import { getTextLength } from '@/utils'

export default {
  name: 'sayModal',
  mixins: [modalMixin],
  data() {
    return {
      message: '',
      comments: null,
      user: null
    }
  },
  mounted() {
    this.$vgo.on('say:show', () => {
      this.openModal()
    })
  },
  methods: {
    handleSave() {
      this.submitComment()
    },
    submitComment() {
      if(!this.message || this.message == '') {
        this.$vgo.tip('随便写些什么吧！^~^', 'warning')
        return
      }
      // 限制100个字符 中文50个字
      if(getTextLength(this.message) > 100) {
        this.$vgo.tip('说说字数不能超过50个', 'warning')
        return
      }
      handleSubmitSay(this.message)
      this.closeModal()
      this.message = ''
    }
  }
}
</script>

<style lang="stylus">
$gray = #F2F6FC
.say-dialog
  padding 10px
  width 500px 
  background-color rgba(0,0,0,0.6)
  position absolute 
  border-radius 8px
  bottom 180px
  left 50%
  transform translateX(-50%)
  z-index 9999
  .dialog-header
    padding 10px 5px 
    color #ffffff
    opacity 0.8
    font-size 16px
  .dialog-footer
    display inline-block
    float right
  .content
    margin-bottom 10px
  .el-button
    opacity 0.8
</style>
